<template>
    <div class="big_box">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>物资列表</el-breadcrumb-item>
            <el-breadcrumb-item>出库单</el-breadcrumb-item>
        </el-breadcrumb>
        <el-divider></el-divider>
        <el-form :model="selectfrom" ref="selectfrom_refs">
            <el-row :gutter="5">
                <el-col :span="3">

                    <el-input placeholder="出库单编号"  v-model="selectfrom.outboundOrder.OutboundNumber"></el-input>

                </el-col>
                <el-col :span="3">

                    <el-input placeholder="物资名称" v-model="selectfrom.DeviceName"></el-input>

                </el-col>
                <el-col :span="3">

                    <el-input placeholder="物品编号" v-model="selectfrom.DeviceNumber"></el-input>

                </el-col>
                <el-col :span="3">

                    <el-date-picker style="width: 100%" placeholder="开始日期"
                                    type="date" 
                                    value-format="yyyy-MM-dd"
                                    v-model="selectfrom.Start"></el-date-picker>

                </el-col>
                <el-col :span="3">

                    <el-date-picker style="width: 100%" placeholder="截止日期"
                                    type="date"
                                    value-format="yyyy-MM-dd"
                                    v-model="selectfrom.End"></el-date-picker>

                </el-col>
                <el-col :span="3">

                    <el-select placeholder="请选择部门"  v-model="selectfrom.outboundOrder.DepartmentId">
                        <el-option :value="0" label="所属部门"></el-option>
                        <el-option v-for="v in AllDepartment" :label="v.DepartmentName" :value="v.Id"></el-option>
                    </el-select>

                </el-col>
                <el-col :span="3">
                    <el-select placeholder="请选择项目" filterable  v-model="selectfrom.outboundOrder.OutboundProject">
                        <el-option :value="0" label="请选择项目"></el-option>
                        <el-option v-for="v in AllProject" :label="v.ProjectName" :value="v.Id"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="3">

                    <el-select placeholder="出库单状态" v-model="selectfrom.outboundOrder.State">
                        <el-option :value="0" label="单据状态"></el-option>
                        <el-option :value="1" label="待审批"></el-option>
                        <el-option :value="2" label="一级审批"></el-option>
                        <el-option :value="4" label="二级审批"></el-option>
                        <el-option :value="8" label="部分归还"></el-option>
                        <el-option :value="16" label="全部归还"></el-option>
                    </el-select>

                </el-col>
            </el-row>
            <el-row :gutter="5" style="padding: 10px 0px">
                <!--<el-col :span="2.5" style="line-height: 38px">
                    <el-switch inactive-text="我未审核" v-model="selectfrom.NoChecked"></el-switch>
                </el-col>-->
                <el-col :span="1.5">
                    <el-checkbox style="width:100%" v-model="selectfrom.NoChecked" label="我未审核" border></el-checkbox>
                </el-col>
                <el-col :span="2">
                    <el-button icon="el-icon-search" @click="formdata"></el-button>
                </el-col>
            </el-row>
        </el-form>
        <el-row style="padding-bottom: 10px">
            <el-col>
                <el-button-group>
                    <el-button class="buttongroup" type="danger" icon="el-icon-delete" @click="BatchDelete_event">批量删除</el-button>
                    <el-button class="buttongroup" type="warning" icon="el-icon-circle-plus-outline" @click="MoreOutboundOrder_event">批量归还</el-button>
                </el-button-group>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <el-table :data="tableData" border stripe style="width: 100%"  @selection-change="SelectionChange_event">
                    <el-table-column type="selection" width="40" align="center"></el-table-column>
                    <el-table-column fixed type="index" label="序号" width="50" align="center" :index="indexMethod"></el-table-column>
                    <el-table-column fixed prop="OutboundNumber" label="编号" width="120" align="center"></el-table-column>
                    <el-table-column prop="OperatDate" show-overflow-tooltip label="出库日期" align="center">
                        <template slot-scope="slot">
                            {{ PurchaseDate_conversion(slot.row.OperatDate) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="State" label="状态" align="center">
                        <template slot-scope="slot">
                            <div v-html="GetStateName(slot.row)"></div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="EmployeeId" label="领用人" width="100" align="center">
                        <template slot-scope="slot">
                            {{ GetUserName(slot.row.EmployeeId) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="DepartmentId" show-overflow-tooltip label="领用部门" width="100" align="center">
                        <template slot-scope="slot">
                            {{ GetDepartmentName(slot.row.DepartmentId) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="OutboundProject" show-overflow-tooltip label="出库项目"  align="center">
                        <template slot-scope="slot">
                            {{ GetProjectName(slot.row.OutboundProject) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="Purpose" show-overflow-tooltip label="用途" align="center"></el-table-column>
                    <el-table-column prop="transport" label="运输方式" align="center">
                        <template slot-scope="slot">
                            <label v-if="slot.row.transport == 1">货运</label>
                            <label v-if="slot.row.transport == 2">物流</label>
                            <label v-if="slot.row.transport == 4">快递</label>
                            <label v-if="slot.row.transport == 8">人工</label>
                            <label v-if="slot.row.transport == 16">空运</label>
                            <label v-if="slot.row.transport == 0"></label>
                        </template>
                    </el-table-column>
                    <el-table-column prop="AuditUserId1" label="部长签批"  align="center">
                        <template slot-scope="slot">
                            {{ GetUserName(slot.row.AuditUserId1) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="AuditTime1" show-overflow-tooltip label="部长签批日期"  align="center">
                        <template slot-scope="slot">
                            {{ PurchaseDate_conversion(slot.row.AuditTime1) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="AuditUserId2" label="运营副总签批"  align="center">
                        <template slot-scope="slot">
                            {{ GetUserName(slot.row.AuditUserId2) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="AuditTime2" show-overflow-tooltip label="运营副总签批日期"  align="center">
                        <template slot-scope="slot">
                            {{ PurchaseDate_conversion(slot.row.AuditTime2) }}
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="360" align="center">
                        <template slot-scope="scope">
                            <el-button type="warning"  plain   size="mini" @click="OutboundOrderTable_show_event(scope.row)">出库单</el-button>
                            <el-button type="success"  plain   size="mini" @click="OutboundOrderEdit_show_event(scope.row,false)">编辑</el-button>
                            <el-button type="info"     plain    size="mini" @click="OutboundOrderEdit_show_event(scope.row,true)">查看</el-button>
                            <el-button type="primary"  plain   size="mini" @click="OutboundOrder_show_event(scope.row)">归还</el-button>
                            <el-button type="danger"   plain   size="mini" @click="BatchDeleteOne_event(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
            <el-col :span="24">
                <div class="block">
                    <el-pagination
                            @size-change="formdata"
                            @current-change="formdata"
                            :current-page.sync="pagination.currentPage"
                            :page-sizes="pagination.pagesizes"
                            :page-size.sync="pagination.pagesize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total.sync="pagination.total">
                    </el-pagination>
                </div>
            </el-col>
        </el-row>

        <el-dialog :visible.sync="OutboundOrderTable.dialog" :title="'出库单---' + OutboundOrderTable.title" fullscreen :before-close="onClose">
            <OutboundOrderTable :outbound-order-detalis="OutboundOrderDetalis" :all-customer="AllCustomer" :all-department="AllDepartment" :audit-rule="auditRule" :all-project="AllProject"></OutboundOrderTable>
        </el-dialog>

        <!--<el-dialog :visible.sync="OutboundOrderEdit.dialog" :title="'修改出库单---'+OutboundOrderEdit.title" width="85%" fullscreen>
            <EditOutboundOrder :showtype="showtype" :outbound-order="OutboundOrderDetalis" :all-department="AllDepartment" :all-project="AllProject"></EditOutboundOrder>
        </el-dialog>-->

        <el-dialog :visible.sync="OutboundOrderEdit.dialog" :title="title_ +'出库单---'+OutboundOrderEdit.title" width="95%" top="10px">
            <EditOutboundOrder :showtype="showtype" :outbound-order="OutboundOrderDetalis" :all-department="AllDepartment" :all-project="AllProject"></EditOutboundOrder>
        </el-dialog>

        <el-dialog :visible.sync="OutboundOrderReturn.dialog" title="归还" width="95%" top="10px" @close="OutboundOrderReturn_close_event">
            <ReturnOutboundOrder :table-data="OutboundRecordList" ref="ReturnOutboundOrder_ref"></ReturnOutboundOrder>
        </el-dialog>

    </div>
</template>

<script>
    import * as publicjs from "../../../../public/Scriput/Public";
    import OutboundOrderTable from "./OutboundOrderTable";
    import EditOutboundOrder from "./EditOutboundOrder";
    import ReturnOutboundOrder from "./ReturnOutboundOrder";

    export default {
        name: "OutboundOrder",
        components: {
            'OutboundOrderTable': OutboundOrderTable,
            'EditOutboundOrder': EditOutboundOrder,
            'ReturnOutboundOrder': ReturnOutboundOrder,
        },
        data() {
            return {
                //表格查询数据
                selectfrom: {
                    DeviceName: '',
                    DeviceNumber: '',
                    NoChecked: false,
                    Start: '',
                    End: '',
                    outboundOrder: {
                        DepartmentId: 0,
                        OutboundProject: 0,
                        OutboundNumber: '',
                        State: 0,
                    },
                },
                //表格数据
                tableData: [],
                //分页数据绑定
                pagination: {
                    currentPage: 1,
                    pagesizes: [10, 20, 30, 40, 50],
                    pagesize: 10,
                    total: 100
                },
                //所有部门
                AllDepartment: [],
                //所有项目
                AllProject: [],
                //所有客户商
                AllCustomer: [],
                //所有人员(包括未删除)
                CompanyAllUsers: [],
                //表格多选数据数组
                SelectMore_lis: [],
                //出库单表格
                OutboundOrderTable: {
                    dialog: false,
                    title: '',
                },
                //出库单表格
                OutboundOrderEdit: {
                    dialog: false,
                    title: '',
                },
                //出库单归还
                OutboundOrderReturn: {
                    dialog: false,
                    title: '',
                },
                //单条入库单数据详情
                OutboundOrderDetalis: null,
                // OA审批规则实体
                auditRule: {},
                //归还单数据
                OutboundRecordList: [],
                //用于编辑与查看的判断
                showtype: false,
                title_: '',
            }
        },
        created() {
            this.Init()
            this.formdata()
        },
        methods: {
            //初始数据加载
            Init() {
                this.AllProject = publicjs.GetAllProject(this.$http)
                this.AllDepartment = publicjs.GetAllDepartment(this.$http)
                this.AllCustomer = publicjs.GetAllCustomer(this.$http)
            },
            //初始化表格数据加载
            formdata() {
                let loadding = this.openLoading();
                this.$http.post('Device/GetOutboundOrder', {
                    currentPage: this.pagination.currentPage,
                    pagesize: this.pagination.pagesize,
                    DeviceName: this.selectfrom.DeviceName,
                    DeviceNumber: this.selectfrom.DeviceNumber,
                    NoChecked: this.selectfrom.NoChecked,
                    outboundOrder: this.selectfrom.outboundOrder,
                    Start: this.selectfrom.Start,
                    End: this.selectfrom.End,
                }).then(res => {
                    loadding.close();
                    this.pagination.total = res.data.count
                    this.tableData = res.data.data
                }).catch(() => {
                    loadding.close();
                    this.$message.error('服务器异常,请联系管理员!')
                })
            },
            //创建时间转化
            PurchaseDate_conversion(val) {
                if (val != null && val != '') {
                    return (val.split(' '))[0]
                } else {
                    return ''
                }
            },
            //获取对应人员名字
            GetUserName(value) {
                let name = ''
                if (value != 0) {
                    for (let i = 0; i < this.$store.state.AllUsers.length; i++) {
                        if (this.$store.state.AllUsers[i].Id == value) {
                            name = this.$store.state.AllUsers[i].UserName
                            return name
                        }
                    }
                }
            },
            //获取对应部门名字
            GetDepartmentName(value) {
                let name = ''
                if (value != 0) {
                    for (let i = 0; i < this.AllDepartment.length; i++) {
                        if (this.AllDepartment[i].Id == value) {
                            name = this.AllDepartment[i].DepartmentName
                            return name
                        }
                    }
                }
            },
            //获取对应项目名字
            GetProjectName(value) {
                let name = ''
                if (value != 0) {
                    for (let i = 0; i < this.AllProject.length; i++) {
                        if (this.AllProject[i].Id == value) {
                            name = this.AllProject[i].ProjectName
                            return name
                        }
                    }
                }
            },
            //状态转化
            GetStateName(obj) {
                let result = publicjs.InitStateColum(obj)
                if (obj.State == 128) {
                    result = "<span style='color:#551A8B'>部分归还</span>";
                }
                else if (obj.State == 256) {
                    result = "<span style='color:#0000CD'>全部归还</span>";
                }
                return result;
            },
            //表格数据选择事件
            SelectionChange_event(value) {
                this.SelectMore_lis = value
            },
            //表格数据序列号
            indexMethod(index) {
                return ((this.pagination.currentPage - 1) * this.pagination.pagesize) + index + 1
            },
            //批量删除
            BatchDelete_event() {
                let idlis = []
                let delect_bool = true
                if (this.SelectMore_lis.length == 0) {
                    this.$message.warning('您还未选择需要删除的设备!')
                } else {
                    for (let i = 0; i < this.SelectMore_lis.length; i++) {
                        idlis.push(this.SelectMore_lis[i].Id)
                        if (this.SelectMore_lis[i].Amount > this.SelectMore_lis[i].StockAmount) {
                            this.$message.warning(this.SelectMore_lis[i].DeviceName + '存在未归还的物资，不能直接删除!')
                            delect_bool = false
                            break;
                        }
                    }
                    if (delect_bool) {
                        this.$confirm('你确定要删除吗?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'error'
                        }).then(() => {
                            this.$http.post('Device/DeleteOutboundOrderContent', idlis).then(res => {
                                if (res.data.IsSuccess) {
                                    this.$message.success(res.data.Msg)
                                    this.formdata()                                
                                } else {
                                    this.$message.warning(res.data.Msg)
                                }
                                this.SelectMore_lis = []
                            }).catch(() => {
                                this.$message.error('服务器异常,请联系管理员!')
                                this.SelectMore_lis = []
                            })
                        }).catch(() => {
                            this.$message.info('已取消!')
                            this.SelectMore_lis = []
                        })
                    }
                }
            },
            //单个数据删除
            BatchDeleteOne_event(obj) {
                this.SelectMore_lis.push(obj)
                this.BatchDelete_event()
            },
            //出库单审批表格数据绑定
            OutboundOrderTable_show_event(obj, value) {
                this.$http.get('Report/OutboundOrder?OutboundNumber=' + obj.OutboundNumber).then(res => {
                    if (res.data.obj != null) {
                        this.OutboundOrderDetalis = res.data.obj
                        this.auditRule = res.data.auditRule
                        this.OutboundOrderTable.dialog = true
                        this.OutboundOrderTable.title = obj.OutboundNumber
                        this.showtype = value;
                        let reportMianShow = window.parent.document.getElementsByClassName("reportMianShow");
                        for (let i = 0; i < reportMianShow.length; i++) {
                            reportMianShow[i].style.display = "none";
                        }
                    }
                })
            },
            //出库单修改弹框
            OutboundOrderEdit_show_event(obj, value) {
                if (value) {
                    this.title_ = ''
                } else {
                    this.title_ = '修改'
                }
                let d = JSON.stringify(obj)
                this.OutboundOrderDetalis = JSON.parse(d)
                this.OutboundOrderEdit.dialog = true
                this.OutboundOrderEdit.title = obj.OutboundNumber
                this.showtype = value;
            },
            async onClose(done){
                await done();
                let reportMianShow = window.parent.document.getElementsByClassName("reportMianShow");
                for (let i = 0; i < reportMianShow.length; i++) {
                    reportMianShow[i].style.display = "inline-block";
                }
            },
            //归还单页面弹框
            OutboundOrder_show_event(obj) {
                this.OutboundOrder_event(obj.OutboundNumber)
            },
            //批量归还
            MoreOutboundOrder_event() {
                let numlis = ''
                this.SelectMore_lis.forEach(v => {
                    numlis += v.OutboundNumber + ','
                })
                numlis = numlis.substring(0, numlis.length - 1)
                this.OutboundOrder_event(numlis)
            },
            //归还方法
            async OutboundOrder_event(OutboundNumber) {
                this.$http.get('Device/OutboundReturnView?OutboundNumber=' + OutboundNumber).then(res => {
                    if (res.data.IsSuccess) {
                        this.OutboundRecordList = JSON.parse(res.data.Msg)
                        this.OutboundOrderReturn.dialog = true
                    } else {
                        this.$message.info(res.data.Msg)
                    }
                })
            },

            //归还弹框关闭
            OutboundOrderReturn_close_event() {
                this.$refs['ReturnOutboundOrder_ref'].formresetFields_event()
            },
        }
    }
</script>

<style scoped>
    .block{
        float: right;
        margin-top: 10px;
    }
    .el-divider--horizontal {
        display: block;
        height: 1px;
        width: 100%;
        margin: 20px 0;
    }
</style>
